<template>
    <view @touchmove.stop.prevent>
        <u-popup v-model="show" mode="bottom" z-index="99" closeable :mask-close-able="false">
            <view class="pop-content">
                <view class="pop-title">注册</view>
                <!-- 注册表格 -->
                <u-form ref="uForm" :model="form" :border-bottom="false" :rules="rules">
                    <u-form-item prop="phone" :border-bottom="false">
                        <input v-model="form.phone" type="number" placeholder="11位手机号(必填)" placeholder-style="color:#999999;" class="cf-input" />
                    </u-form-item>
                    <u-form-item prop="code" :border-bottom="false">
                        <view class="u-flex u-row-between">
                            <input
                                type="number"
                                v-model="form.code"
                                placeholder="请输入验证码"
                                placeholder-style="color:#999999;"
                                maxlength="6"
                                class="u-margin-right-20 cf-input"
                            />
                            <u-button :hair-line="false" @click="getVerfyCode" class="getVerfyCode-btn" :disabled="disabled">{{ btnText }}</u-button>
                        </view>
                    </u-form-item>
                    <u-form-item prop="password" :border-bottom="false">
                        <input v-model="form.password" type="password" placeholder="6-16位密码 区分大小写 (必填)" placeholder-style="color:#999999;" class="cf-input" />
                    </u-form-item>
                    <u-form-item prop="confirm" :border-bottom="false">
                        <input v-model="form.confirm" type="password" placeholder="确认密码 (必填)" placeholder-style="color:#999999;" class="cf-input" />
                    </u-form-item>
                    <u-form-item prop="invite" :border-bottom="false" v-if="type === 1">
                        <input v-model="form.invite" type="text" placeholder="邀请人邀请码 (必填)" placeholder-style="color:#999999;" class="cf-input" />
                    </u-form-item>
                    <u-form-item prop="read" :border-bottom="false">
                        <u-checkbox v-model="form.read" active-color="#FC4F75">
                            已阅读并同意
                            <text @click.stop="readPolicy(3)">《隐私政策》</text>
                            和
                            <text @click.stop="readPolicy(0)">《用户协议》</text>
                        </u-checkbox>
                    </u-form-item>
                </u-form>
                <u-button id="guideBtn" class="u-flex u-row-left u-flex-2 register-btn u-margin-top-40" type="p" @click="submit">注册</u-button>
                <view class="login-text" @click="login">使用已有账户登录</view>
            </view>
        </u-popup>
        <verify v-if="showVerify" ref="verify" @success="callback" captchaType="blockPuzzle"></verify>
        <u-popup v-model="changeUserType" mode="bottom" safe-area-inset-bottom :closeable="false">
            <view class="inside-user">
                <view class="title">您已为我们内部客户!</view>
                <view class="head-1">基本信息</view>
                <view class="head">商户名称：{{user.merchantName}}</view>
                <view class="head">联系人姓名：{{user.realname}}</view>
                <view class="head">联系人电话：{{user.phone}}</view>
                <view class="head">专属客服：{{user.ownershipUserName}} {{user.ownershipUserPhone}}</view>
                <view class="tips">
                    <view>
                        1. 注册成为平台注册用户后，您可以使用本app在线 购买在线商品
                    </view>
                    <view>
                        2. 请仔细核对商家信息，如有疑问或信息更改请联系 专属客服人员。
                    </view>
                </view>
                <view class="u-flex btns">
                    <u-button type="s" @click="changeUserType = false">我再想想</u-button>
                    <u-button type="p" @click="change">注册为平台用户</u-button>
                </view>
            </view>
        </u-popup>
        <u-modal v-model="showModal" :content="content" title="" @confirm="confirm"></u-modal>
        <!-- <guide
            :show="showGuideMask"
            :guideArray="guideArray"
            :width="GWidth"
            :height="GHeight"
            :left="GLeft"
            :top="GTop"
            :currentIndex="currentGuideIndex"
            @click="nextGuideHandle()"
        ></guide> -->
    </view>
</template>

<script>
import Verify from '@/components/verify/verify.vue';
// import guideMixin from '@/common/mixin/guide.js'
export default {
    // mixins:[guideMixin],
    components: {
        Verify
    },
    data() {
        return {
            changeUserType:false,
            showVerify:false,
            show: false,
            showModal: false,
            content:'进入首页',
            btnText: '获取验证码',
            disabled: false,
            interval: null,
            second: 0, // 倒计时
            form: {},
            type:0,
            rules: {
                phone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 16,
                        message: '请输入长度为6-16位的密码',
                        trigger: 'blur'
                    }
                ],
                confirm: [
                    {
                        required: true,
                        message: '请确认密码',
                        trigger: 'blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            return value == this.form.password;
                        },
                        message: '两次密码输入不一致',
                        trigger: 'blur'
                    }
                ],
                read: [
                    {
                        validator: (rule, value, callback) => {
                            return value == true;
                        },
                        message: '请先阅读注册协议!',
                        trigger: 'blur'
                    }
                ]
            },
            user:{},
            // guideArray: [
            //     {
            //         guideID: 'guideBtn',
            //         src: '/static/guide/6.png',
            //         imgW: 395,
            //         imgH: 464,
            //         width: 140,
            //         offset: -100,
            //         type: 'left',
            //         Mleft: 80,
            //         Btop: '10vh',
            //         direction: 'up'
            //     }
            // ]
        };
    },
    methods: {
        guideinit(){
            // 用两个字段 区分 有无验证码两种情况
            let str = this.type == 1 ? 'register-1' : 'register-0'
            if (this.guideConfig.indexOf(str) == -1) {
                this.guideArray[0].src = this.type == 1 ? '/static/guide/9.png' : '/static/guide/6.png'
                this.guideArray[0].imgH = this.type == 1 ? 710 : 464
                // 显示引导页面
                console.log('显示引导页面');
                this.showGuideMask = true;
                this.$store.dispatch('guide/addPage', str)
                this.initGuideFun(this.currentGuideIndex);
            }
        },
        open({ type }) {
            this.show = true;
            if (type === 1) {
                this.type = 1
                this.rules.invite = [
                    {
                        required: true,
                        message: '请输入邀请码',
                        trigger: 'blur'
                    }
                ];
            }else{
                this.type = 0
            }
            this.$nextTick(() => {
                this.$refs.uForm.setRules(this.rules);
            });
            // this.$u.sleep(600).then(()=>{
            //     this.guideinit()
            // })
        },
        // 提交
        submit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    let para = {
                        accountPhone: this.form.phone,
                        password: this.form.password,
                        confirmPassword: this.form.confirm,
                        verificationCode: this.form.code
                    };
                    // 如果有 邀请码
                    if (this.form.invite) {
                        para.invitationCode = this.form.invite;
                    }
                    this.$u.$api.RegisterApi.authRegister(para).then(res => {
                        console.log(res);
                        // 如果是内部用户
                        if (res.type === 5) {
                            this.user = res
                            this.changeUserType = true
                        }else{
                            this.$u.toast('注册成功!', 2000);
                            this.showModal = true
                        }
                    });
                }
            });
        },
        // 直接登陆
        login() {
            this.$u.$MRouter.login.to();
        },
        // 获取验证码
        getVerfyCode() {
            this.showVerify = true
            this.$nextTick(()=>{
                if (this.$u.test.mobile(this.form.phone)) {
                    this.$refs.verify.show();
                } else {
                    this.$u.toast('手机号输入错误!');
                }
            })
        },
        callback(params) {
            this.sendMessage(params.captchaVerification);
        },
        sendMessage(captchaVerification) {
            let para = {
                accountPhone: this.form.phone,
                verificationCodeType: 1,
                code: captchaVerification
            };
            this.$u.$api.MerchantApi.sendCode(para).then(res => {
                //触发倒计时（一般用于请求成功验证码后调用）
                this.$u.toast('验证码发送成功,请注意查收!');
                // 禁用按钮
                this.disabled = true;
                this.second = 60;
                console.log('定时器:', this.interval);
                clearInterval(this.interval);
                this.interval = setInterval(() => {
                    if (this.second > 0) {
                        this.second -= 1;
                        this.btnText = this.second + 'S';
                    } else {
                        this.disabled = false;
                        this.second = 0;
                        this.btnText = '获取验证码';
                    }
                }, 1000);
            });
        },
        readPolicy(type) {
            this.$u.$MRouter.policy.to({ type });
        },
        //
        change(){
            this.$u.$api.MerchantApi.changeMerchantType({
                userId:this.user.userId
            }).then(res=>{
                this.$store.dispatch('loginAction',{user:res,vm:this})
                this.$u.$MRouter.regSuccess.to()
            })
        },
        confirm(){
            this.$store.dispatch('LoginByUsername',{
                userInfo:{
                    username:this.form.phone,
                    password:this.form.password
                },
                vm:this
            }).then(response=>{
                this.$u.$MRouter.home.to()
            }).catch(e=>{
                console.log(e);
                this.$u.toast(e)
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.pop-content {
    padding: 30rpx;
    font-size: 26rpx;
    .cf-input {
        width: 100%;
        padding: 20rpx;
        background-color: $uni-bg-color-grey;
        border-radius: 10rpx;
    }
}
.pop-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
}

.register-btn {
    width: 314rpx;
    height: 80rpx;
}
.login-text {
    color: hsl(347, 97%, 65%);
    margin: 0 auto;
    text-align: center;
    margin-top: 40rpx;
}
.getVerfyCode-btn {
    width: 257rpx;
    height: 80rpx;
    border: none;
    background-color: $uni-bg-color-grey;
}
.inside-user{
    max-height: 60vh;
    padding: 30rpx;
    .title{
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
    }
    .head-1{
        line-height: 60rpx;
    }
    .head{
        font-weight: bold;
        line-height: 60rpx;
    }
    .tips{
        background-color: #f8f8f8;
        padding: 20rpx;
        border-radius: 10rpx;
        line-height: 60rpx;
    }
    .btns{
        margin-top: 40rpx;
    }
}
</style>
